<!DOCTYPE html>

<html lang='zh-CN'>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
    <script src="./js/mustache.js"></script>
    <script>
        let templateStr = `
          <ul>
            {{#arr}}
            <li>
                <div class="hd">{{name}}的基本信息</div>
                <div class="bd">
                    <p>姓名: {{name}}</p>
                    <p>年龄: {{age}}</p>
                    <p>性别: {{sex}}</p>
                </div>
            </li>
            {{/arr}}
        </ul>
        `
        let data = {
            arr: [
                { "name": "小明", "age": 12, "sex": "男" },
                { "name": "小红", "age": 11, "sex": "女" },
                { "name": "小强", "age": 13, "sex": "男" }
            ]
        };

        let domStr = Mustache.render(templateStr, data)
        document.getElementById("container").innerHTML = domStr
    </script>
</body>

</html>